<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My CV</title>
    <script>
        var onMousemoveCount = 0;
        var onMousemoveCount2 = 0;
        var onMousemoveCount3 = 0;
        function displayhead() {
            onMousemoveCount++;
            if (onMousemoveCount == 1) {
                document.getElementById("part2").innerHTML = "<div id='head' onmousemove='bigImg(this)'; onmouseout='normalImg(this)'></div><div id='int1'><b>车振华</b><br>喜欢创造^_^ </div>";
            }
        }
        function display() {
            onMousemoveCount2++;
            if (onMousemoveCount2 == 1) {
                setInterval(type, 50);
                document.getElementById('part3').innerHTML = "<div id='int3'></div><div class='animated_div'></div>";
            }

        }
        function bigImg(x) {
            x.style.height = "350px";
            x.style.width = "350px";
        }
        function normalImg(x) {
            x.style.height = "300px";
            x.style.width = "300px";
        }
        var currentPosition1, currentPosition2, timer, timer2;
        function GoTop() {
            timer = setInterval("runToTop()", 1);
        }
        function runToTop() {
            currentPosition1 = document.documentElement.scrollTop || document.body.scrollTop;
            currentPosition1 -= 10;
            if (currentPosition1 > 0) {
                window.scrollTo(0, currentPosition1);
            }
            else {
                window.scrollTo(0, 0);
                clearInterval(timer);
            }
        }
        function Goint() {
            timer2 = setInterval("Toint()", 1);
        }
        function Toint() {
            currentPosition2 = document.documentElement.scrollTop || document.body.scrollTop;
            currentPosition2 += 5;
            if (currentPosition2 < 667) {
                window.scrollTo(0, currentPosition2);
            }
            else {
                clearInterval(timer2);
            }
        }
        var o;
        function  displayzongjie(){
            onMousemoveCount3++;
            if(onMousemoveCount3==1){
                document.getElementById('final').innerHTML="<div id='finaltext'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经过了这一次的任务，我觉得网页的重构很有意思，很享受这个边学习边实践的过程，也十分希望可以进入HCI里进行学习。 <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我对前端很感兴趣，我相信自己的学习能力，可以让我地适应工作室的氛围，我会很认真的准备每一次任务，而且不断地开拓自己的视野，提高自己的技术。也相信自己可以给HCI带来一些不一样的东西。 <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最后感谢观看这个关于我的个人简历，十分感谢！ </div>";
            }
        }
    </script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .greeting {
            width: 500px;
            height: 300px;
            padding-top: 100px;
            padding-bottom: 200px;
            font-family: 方正兰亭超细黑简体;
            font-size: 55px;
            color: white;
            margin: 0 auto;
            z-index: 98;
        }

        .greeting1 {
            width: 210px;
            height: 50px;
            display: block;
            font-family: 方正兰亭超细黑简体;
            font-size: 35px;
            color: white;
            margin: 50px auto;
            z-index: 98;
            border: solid;
            cursor: pointer;
            border-radius: 15px;
        }

        .greeting1:hover {
            background-color: #ffbf10;
        }

        #head {
            margin: auto;
            position: relative;
            top: 40px;
            width: 300px;
            height: 300px;
            animation: chuchang1 2s;
            animation-iteration-count: 1;
            background-image: url("29355516778526250_副本.png");
            background-size: cover;
        }

        #int1 {
            color: #fbffff;
            font-family: 方正兰亭超细黑简体;
            position: relative;
            font-size: 50px;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            padding-top: 30px;
            line-height: 2.2;
            animation: chuchang2 2s;
            animation-iteration-count: 1;
            text-align: center;
        }

        #back-up {
            height: 30px;
            width: 43px;
            position: fixed;
            cursor: pointer;
            right: 8px;
            bottom: 30px;
        }

        @keyframes chuchang1 {
            0% {
                opacity: 0;
                left: -640px;
                top: 40px;
                transform: rotate(0deg) translate(0, 0);
            }
            100% {
                opacity: 1;
                left: 0px;
                top: 40px;
                transform: rotate(360deg) translate(0, 0);
            }
        }

        @keyframes chuchang2 {
            0% {
                opacity: 0;
                left: 500px;
            }
            100% {
                opacity: 1;
                left: 0px;
            }
        }
        @keyframes fadeInOut {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        #int2 {
            width: 100%;
            height: 100px;
            padding-top: 50px;
            text-align: center;
            font-size: 70px;
            font-family: LilyUPC;
        }

        #int3 {
            width: 720px;
            height: 350px;
            padding: 40px;
            font-size: 30px;
            font-family: "微软雅黑 Light";
            float: left;
            line-height: 1.5;
            white-space:pre-wrap;
        }

        .animated_div {
            background-size: cover;
            background-image: url("880283526635815087_副本.jpg");
            width: 380px;
            height: 380px;
            position: relative;
            left: 900px;
            top: 50px;
            animation: xuanzhuan 3s;
            animation-iteration-count: 1;
            opacity: 1;
        }

        @keyframes xuanzhuan {
            0% {
                opacity: 0;
                width: 1px;
                height: 1px;
                transform: rotate(0deg);
            }
            100% {
                opacity: 1;
                width: 380px;
                height: 380px;
                transform: rotate(360deg);
            }
        }

        #skill {
            width: 100%;
            height: 100%;
            background-image: url("services-bg.jpg");
            background-size: cover;
        }

        #myskill {
            width: 300px;
            height: 100px;
            position: relative;
            top: 10px;
            left: 38%;
            text-align: center;
            font-size: 60px;
            font-family: "Courier New";
            color: white;
        }

        #lclick {
            font-size: 30px;
            font-family: "Courier New";
            color: white;
            display: block;
            cursor: pointer;
        }

        #lclick:hover {
            color: orange;
        }

        #demo1 {
            width: 200px;
            height: 200px;
            position: relative;
            left: 100px;
            top: 50px;
            font-size: 25px;
            text-align: center;
            color: white;
            font-family: 黑体;
            display: none;
            animation-name: fadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
            animation-duration: 1s;
            animation-direction: alternate;
        }

        #demo2 {
            width: 200px;
            height: 200px;
            position: relative;
            top: -160px;
            left: 570px;
            display: none;
            font-size: 25px;
            text-align: center;
            color: white;
            font-family: 黑体;
            animation-name: fadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
            animation-duration: 1s;
            animation-direction: alternate;
        }

        #demo3 {
            width: 200px;
            height: 200px;
            position: relative;
            top: -370px;
            left: 1000px;
            display: none;
            font-size: 25px;
            text-align: center;
            color: white;
            font-family: 黑体;
            animation-name: fadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
            animation-duration: 1s;
            animation-direction: alternate;
        }

        #demo4 {
            width: 200px;
            height: 250px;
            position: relative;
            left: 100px;
            top: -300px;
            display: none;
            font-size: 25px;
            text-align: center;
            color: white;
            font-family: 黑体;
            animation-name: fadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
            animation-duration: 1s;
            animation-direction: alternate;
        }

        #demo5 {
            width: 200px;
            height: 250px;
            position: relative;
            top: -560px;
            left: 570px;
            display: none;
            font-size: 25px;
            text-align: center;
            color: white;
            font-family: 黑体;
            animation-name: fadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
            animation-duration: 1s;
            animation-direction: alternate;
        }

        #demo6 {
            width: 200px;
            height: 250px;
            position: relative;
            top: -820px;
            left: 1000px;
            display: none;
            font-size: 25px;
            text-align: center;
            color: white;
            font-family: 黑体;
            animation-name: fadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
            animation-duration: 1s;
            animation-direction: alternate;
        }
        #div{
            width: 100%;
            height: 100%;
            background-image: url('slide-1.jpg');
        }
        #final{
            height: 130%;
            width: 100%;
            background-image: url("home-bg.jpg");
            background-size: cover;

        }
        @keyframes xuanzhuan2 {
            0% {
                opacity: 0;
                transform: rotate(0deg);
            }
            100% {
                opacity: 1;
                transform: rotate(360deg);
            }
        }
        #finaltext{
            width: 600px;
            height: 400px;
            margin:auto;
            font-size: 30px;
            font-family: 黑体;
            animation-Duration:2s;
            animation-name:xuanzhuan2;
            animation-iteration-count: 1;
            position: relative;
            top: 300px;
        }
    </style>
</head>
<body>
<div id="div">
    <div class="greeting">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Hello!<br>Welcome to here.
        <div class="greeting1" onclick="Goint()">
            &nbsp;Let's begin
        </div>
    </div>
</div>
<div id="part2" style="width: 100%; height: 100%; background-image: url('bg2.jpg');" onmousemove="displayhead();">
</div>
<div id="int2">
    <b>ABOUT ME</b>
</div>
<div id="part3" style="width: 100%; height: 520px;" onmousemove="display();">
</div>
<div id="skill">
    <div id="myskill">
        MY SKILL
        <div id="lclick" onclick="displayskill()"> Click me !</div>
    </div>
    <div id="demo1">
        <img src="CSS.png" width="150" height="150">
        <br>CSS
    </div>
    <div id="demo2">
        <img src="HTML.png" width="150" height="150">
        <br>HTML
    </div>
    <div id="demo3">
        <img src="C.png" width="150" height="150">
        <br>C语言
    </div>
    <div id="demo4">
        <img src="JS.png" width="150" height="150">
        <br>JavaScript<br>(学习中)<br>(•̀ㅂ•́)و✧
    </div>
    <div id="demo5">
        <img src="JAVA.png" width="150" height="150">
        <br>Java<br>(学习中)<br>(•̀ㅂ•́)و✧
    </div>
    <div id="demo6">
        <img src="D.png" width="150" height="150">
        <br>数据结构
    </div>
</div>
<div id="final" onmousemove="displayzongjie();">
</div>
<div id="back-up" onclick="GoTop()">
    <img src="to-top1.png">
</div>
</body>
<script>
    var mydiv = document.getElementById('div');
    var aImg=document.getElementById("div").getElementsByTagName('img')
    var imgArray = ['slide-1.jpg', 'slide-2.jpg'];
    var i = -1;
    setInterval(function () {
        i++;
        i %= imgArray.length;
        mydiv.style.backgroundImage ="url("+imgArray[i]+")";
    }, 2000);
</script>
<script>
    var count= 0,index = 0;
    var word ="   我叫车振华,来自数学与信息学院,15级软件工程三班。"
            +"虽然我是大二的老辣条，但也只是刚刚接触前端的知识，没有任何项目经验，在班里成绩也只是中上。"
            +"做这个网页之前只是刚学完CSS，JS刚开始学习。尽管如此，我还是充满热情地开始了学习以及尝试。"
            +"而我也迷上了做一个这个的网页。当我想到一些特效，我就会去百度，然后再思考，怎么合理地放在自己的代码里。"
            +"这一过程十分有趣，也了解到很多关于网页重构的知识。自己慢慢爱上了这个方向了。"
    function type() {
         document.getElementById('int3').innerHTML = word.substring(0, index++);
    }
</script>
<script>
    function displayskill() {
        var oDiv1 = document.getElementById('demo1');
        setTimeout(function () {
            oDiv1.style.display = 'block';
        }, 0);
        var oDiv2 = document.getElementById('demo2');
        setTimeout(function () {
            oDiv2.style.display = 'block';
        }, 500);
        var oDiv3 = document.getElementById('demo3');
        setTimeout(function () {
            oDiv3.style.display = 'block';
        }, 1000);
        var oDiv4 = document.getElementById('demo4');
        setTimeout(function () {
            oDiv4.style.display = 'block';
        }, 1500);
        var oDiv5 = document.getElementById('demo5');
        setTimeout(function () {
            oDiv5.style.display = 'block';
        }, 2000);
        var oDiv6 = document.getElementById('demo6');
        setTimeout(function () {
            oDiv6.style.display = 'block';
        }, 2500);
    }
</script>
</html>